<template>
  <div class="main">
    <div class="header">
      <div class="swiper">
        <el-carousel trigger="click" height="377px">
          <el-carousel-item>
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/BHFtLyokV0_swiper1.jpg" class="img">
            <div class="mask">
              <span class="des">关于开展2021年度党政机关办公用房信息统计报送的通知</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <div class="top">
          <div class="tabs">
            <div class="tab-title">
              <div :class="activeTitle == 0 ? 'tab-item current' : 'tab-item'" @click="changeTitle(0)">工作动态</div>
            </div>
            <div class="tab-title">
              <div :class="activeTitle == 1 ? 'tab-item current' : 'tab-item'" @click="changeTitle(1)">政策法规</div>
            </div>
          </div>
          <div class="more">更多 ></div>
        </div>
        <div class="card-list">
          <div class="item">
            <i class="dot"></i>
            <span class="text">关于开展2021年度党政机关办公用房信息统计报送的通知</span>
            <span class="date">2021-09-14</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="unit">
        <div class="card-title">
          <span>单位基本信息</span>
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/m0de9kNlT2_sxg.png" alt="" class="img">
        </div>
        <div class="agency-name">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/qGYjKpd9Qx_bgl_jzmj.png" alt="" class="icon">
          <span>{{ unitInfo.name }}</span>
        </div>
        <div class="info-bar">
          <div class="info-item">
            <div class="label">负责人：</div>
            <div class="info">{{ unitInfo.leader }}</div>
          </div>
          <div class="info-item">
            <div class="label">单位级别：</div>
            <div class="info">{{ getJb(unitInfo.unitType) }}</div>
          </div>
        </div>
        <div class="chart" style="padding-top: 25px;padding-left: 0;">
          <div class="info-area" style="display: flex;width: 100%;">
            <div class="info-item">
              <div class="pic"><img src="http://warehouse-api.lanbeiduo.com/api/file/download/N2k3pGjpRE_sdrs.png"
                  class="icon"></div>
              <div class="label">三定方案人数</div>
              <div class="info">{{ unitInfo.thirdNums }}<span style="font-size:14px;color:#999999;">人</span></div>
            </div>
            <div class="info-item actual">
              <div class="pic"><img src="http://warehouse-api.lanbeiduo.com/api/file/download/tDtsqejbBp_syrs.png"
                  class="icon"></div>
              <div class="label">实有人数</div>
              <div class="info">{{ unitInfo.realNums }}<span style="font-size:14px;color:#999999;">人</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="building">
        <div class="building-top">
          <div class="building-title">
            <span>办公楼信息</span>
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/m0de9kNlT2_sxg.png" alt="" class="img">
          </div>
          <div>
            <el-select v-model.number="bglInfo.ids" placeholder="请选择" style="width: 200px;" @change="changeBuild">
              <el-option v-for="item in bglData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
        </div>
        <div class="building-content">
          <img v-if="bglInfo.picture" :src="bglInfo.picture" alt="" class="buliding-pic">
          <img v-else src="http://warehouse-api.lanbeiduo.com/api/file/download/s9KWtQkhsK_empty-348x256.png" alt=""
            class="buliding-pic">
          <div class="icon-list">
            <div class="icon-item" style="margin-bottom: 13px;">
              <img src="http://warehouse-api.lanbeiduo.com/api/file/download/qGYjKpd9Qx_bgl_jzmj.png" alt=""
                class="icon">
              <div class="">
                <div class="label">建筑面积</div>
                <div class="value">
                  <span class="num">{{ bglInfo.totalArea }}</span>
                  <span class="dw">m²</span>
                </div>
              </div>
            </div>
            <div class="icon-item" style="margin-bottom: 13px;">
              <img src="http://warehouse-api.lanbeiduo.com/api/file/download/lXJ0frT7PT_bgl_ydmj.png" alt=""
                class="icon">
              <div class="">
                <div class="label">用地面积</div>
                <div class="value">
                  <span class="num">{{ bglInfo.coverArea }}</span>
                  <span class="dw">m²</span>
                </div>
              </div>
            </div>
            <div class="icon-item">
              <img src="http://warehouse-api.lanbeiduo.com/api/file/download/zXkYUyyCov_bgl_zcs.png" alt=""
                class="icon">
              <div class="">
                <div class="label">总层数</div>
                <div class="value">
                  <span class="num">{{ bglInfo.totalFloor }}</span>
                </div>
              </div>
            </div>
            <div class="icon-item">
              <img src="http://warehouse-api.lanbeiduo.com/api/file/download/FMGkpb9xm9_bgl_jgsj.png" alt=""
                class="icon">
              <div class="">
                <div class="label">建设年代</div>
                <div class="value">
                  <span class="num">{{ bglInfo.createYear }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="building-bottom">
          <div class="item" @click="openWuYe">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/KcnFhrlllJ_wy.png" alt="" class="icon">
            <span>物业</span>
          </div>
          <div class="item" @click="openQuanShu">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/ejiZpTfAhm_qs.png" alt="" class="icon">
            <span>权属</span>
          </div>
          <div class="item">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/i8myNCL5bs_sypz.png" alt="" class="icon">
            <span>使用凭证</span>
          </div>
          <div class="item" style="margin-right: 0;border: none;">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/xeUTqyBxCI_dlwz.png" alt="" class="icon">
            <span>地理位置</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <img src="http://warehouse-api.lanbeiduo.com/api/file/download/ifx5NV0aTx_biaoyu.png" alt="" class="picture">
    </div>
    <div class="section">
      <div class="top">
        <div class="card-title">
          <span>数据分析</span>
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/m0de9kNlT2_sxg.png" alt="" class="img">
        </div>
        <div class="right">
          <div class="item">
            <div class="label">数据状态：</div>
            <div class="value">{{ unitInfo.reportStatus==0?'未上报':'已上报' }}</div>
          </div>
          <div class="item">
            <div class="label">上报时间：</div>
            <div class="value">{{unitInfo.reportedAt?formatTimestamps(unitInfo.reportedAt):'待上报'}}</div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="yf-type">
          <div class="info" style="background: linear-gradient(to right, #eff5ff, #f6faff);">
            <div class="name">办公室</div>
            <div class="label">核定使用面积：</div>
            <div class="value">
              <span class="num" style="color: #307ee8;">{{ sjfxInfo.bgs.approveArea||'' }}</span>
              <span>m²</span>
            </div>
            <div class="label">实际使用面积：</div>
            <div class="value">
              <span class="num" style="color: #307ee8;">{{ sjfxInfo.bgs.realArea||'' }}</span>
              <span>m²</span>
            </div>
          </div>
          <div class="bottom green" v-if="sjfxInfo.bgs.exceedArea=='未超标'">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/mKKjz2VuQd_bcb.png" alt="" class="icon">
            <span>使用面积不超标</span>
          </div>
          <div class="bottom red" v-else>
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/a9VKnWTCti_cb.png" alt="" class="icon">
            <span>超标面积<span style="margin: 0 4px;">{{ sjfxInfo.bgs.exceedArea||'' }}</span>m²</span>
          </div>
        </div>
        <div class="yf-type">
          <div class="info" style="background: linear-gradient(to right, #f4fbfc, #f7fdfa);">
            <div class="name">服务用房</div>
            <div class="label">核定使用面积：</div>
            <div class="value">
              <span class="num" style="color: #20c9a3;">{{ sjfxInfo.fwyf.approveArea||'' }}</span>
              <span>m²</span>
            </div>
            <div class="label">实际使用面积：</div>
            <div class="value">
              <span class="num" style="color: #20c9a3;">{{ sjfxInfo.fwyf.realArea||'' }}</span>
              <span>m²</span>
            </div>
          </div>
          <div class="bottom green" v-if="sjfxInfo.fwyf.exceedArea=='未超标'">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/mKKjz2VuQd_bcb.png" alt="" class="icon">
            <span>使用面积不超标</span>
          </div>
          <div class="bottom red" v-else>
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/a9VKnWTCti_cb.png" alt="" class="icon">
            <span>超标面积<span style="margin: 0 4px;">{{ sjfxInfo.fwyf.exceedArea||'' }}</span>m²</span>
          </div>
        </div>
        <div class="yf-type">
          <div class="info" style="background: linear-gradient(to right, #fef6f4, #fffaf7);">
            <div class="name">设备用房</div>
            <div class="label">核定使用面积：</div>
            <div class="value">
              <span class="num" style="color: #eb9448;">{{ sjfxInfo.sbyf.approveArea||'' }}</span>
              <span>m²</span>
            </div>
            <div class="label">实际使用面积：</div>
            <div class="value">
              <span class="num" style="color: #eb9448;">{{ sjfxInfo.sbyf.realArea||'' }}</span>
              <span>m²</span>
            </div>
          </div>
          <div class="bottom green" v-if="sjfxInfo.sbyf.exceedArea=='未超标'">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/mKKjz2VuQd_bcb.png" alt="" class="icon">
            <span>使用面积不超标</span>
          </div>
          <div class="bottom red" v-else>
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/a9VKnWTCti_cb.png" alt="" class="icon">
            <span>超标面积<span style="margin: 0 4px;">{{ sjfxInfo.sbyf.exceedArea||'' }}</span>m²</span>
          </div>
        </div>
        <div class="yf-type">
          <div class="info" style="background: linear-gradient(to right, #f5f5fd, #fcfbff);">
            <div class="name">基本办公用房</div>
            <div class="label">核定使用面积：</div>
            <div class="value">
              <span class="num" style="color: #6039cd;">{{ sjfxInfo.jbbgyf.approveArea||'' }}</span>
              <span>m²</span>
            </div>
            <div class="label">实际使用面积：</div>
            <div class="value">
              <span class="num" style="color: #6039cd;">{{ sjfxInfo.jbbgyf.realArea||'' }}</span>
              <span>m²</span>
            </div>
          </div>
          <div class="bottom green" v-if="sjfxInfo.jbbgyf.exceedArea=='未超标'">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/mKKjz2VuQd_bcb.png" alt="" class="icon">
            <span>使用面积不超标</span>
          </div>
          <div class="bottom red" v-else>
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/a9VKnWTCti_cb.png" alt="" class="icon">
            <span>超标面积<span style="margin: 0 4px;">{{ sjfxInfo.jbbgyf.exceedArea||'' }}</span>m²</span>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="card-title">
        <span>快捷服务</span>
        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/m0de9kNlT2_sxg.png" alt="" class="img">
      </div>
      <div class="link-list">
        <div class="link-item">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/VxWEMZHsZy_wjxz.png" alt="" class="img">
          <div class="service-word">
            <div class="title">
              文件下载
            </div>
            <div class="english">
              FILE DOWNLOAD
            </div>
          </div>
          <div class="service-word2">
            <div class="label">文件下载</div>
            <div class="info">FILE DOWNLOAD</div>
          </div>
        </div>
        <div class="link-item">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/Ure4lgSsFQ_mcjs.png" alt="" class="img">
          <div class="service-word">
            <div class="title">
              名词解释
            </div>
            <div class="english">
              DEFINITION
            </div>
          </div>
          <div class="service-word2">
            <div class="label">名词解释</div>
            <div class="info">DEFINITION</div>
          </div>
        </div>
        <div class="link-item">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/FNJkCnQS8M_cjwt.png" alt="" class="img">
          <div class="service-word">
            <div class="title">
              常见问题
            </div>
            <div class="english">
              FREQUENTLY ASKED QUESTION
            </div>
          </div>
          <div class="service-word2">
            <div class="label">常见问题</div>
            <div class="info"> FREQUENTLY ASKED QUESTION</div>
          </div>
        </div>
        <div class="link-item">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/j82UlnpeRO_shzx.png" alt="" class="img">
          <div class="service-word">
            <div class="title">
              售后咨询
            </div>
            <div class="english">
              REQUEST
            </div>
          </div>
          <div class="service-word2">
            <div class="label">售后咨询</div>
            <div class="info">REQUEST</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 权属信息列表 -->
    <el-drawer v-model="dialog2" :size="1000" :before-close="handleClose2" :show-close="false" class="loudong-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">权属信息</span>
          <div>
            <el-button @click="dialog2 = false">取消</el-button>
            <el-button type="primary" @click="addQuanShu">新增</el-button>
          </div>
        </div>
      </template>
      <el-table :data="quanshuData" row-key="id">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="产权证号" prop="certificateNo" width="200"></el-table-column>
        <el-table-column align="left" label="权利人" prop="obligee"></el-table-column>
        <el-table-column align="left" label="共有情况">
          <template #default="scope">
            <span>{{ scope.row.commonSituation == 1 ? '共同共有' : '单独所有' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="不动产单元号" prop="realEstateUnitNo"></el-table-column>
        <el-table-column align="left" fixed="right" label="操作" min-width="100">
          <template #default="scope">
            <el-button type="primary" link icon="edit" @click="editQuanShu(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" link icon="delete" @click="delQuanShu(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <!-- 新增权属信息 -->
    <el-drawer v-model="dialog3" :size="1000" :before-close="handleClose3" :show-close="false" class="loudong-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ quanshuTitle }}</span>
          <div>
            <el-button @click="closeDialog3"> 取 消 </el-button>
            <el-button type="primary" @click="enterDialog3"> 确 定 </el-button>
          </div>
        </div>
      </template>
      <el-form v-if="dialog3" ref="quanshuForm" label-width="150" :model="quanshuForms" :rules="quanshuRules">
        <div class="quanshu-top">
          <div class="section-title">
            <div>不动产权证信息</div>
          </div>
          <div style="color: #ff6666;">注：基本信息(按《不动产权证书》证书上的信息填写)</div>
        </div>
        <el-form-item label="产权证号" prop="certificateNo">
          <el-input v-model="quanshuForms.certificateNo" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px;color: #FF473E;">如：渝2023 xx市不动产权第0000001号</span>
        </el-form-item>
        <el-form-item label="权利人" prop="obligee">
          <el-input v-model="quanshuForms.obligee" placeholder="请输入" style="width: 360px" />
        </el-form-item>
        <el-form-item label="共有情况" prop="commonSituation">
          <el-select v-model="quanshuForms.commonSituation" placeholder="请选择" style="width: 360px">
            <el-option label="共同共有" :value="1" />
            <el-option label="单独所有" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="不动产单元号">
          <el-input v-model="quanshuForms.realEstateUnitNo" placeholder="请输入" style="width: 360px" />
        </el-form-item>
        <el-form-item label="权利类型">
          <el-input v-model="quanshuForms.rightType" placeholder="请输入" style="width: 360px" />
        </el-form-item>
        <el-form-item label="权利性质">
          <el-input v-model="quanshuForms.rightNature" placeholder="请输入" style="width: 360px" />
        </el-form-item>
        <el-form-item label="用途">
          <el-input v-model="quanshuForms.purpose" placeholder="请输入" style="width: 360px" />
        </el-form-item>
        <el-form-item label="土地使用权面积">
          <el-input v-model="quanshuForms.landUseRightArea" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px;">单位：平方米</span>
        </el-form-item>
        <el-form-item label="房屋建筑面积" prop="buildingArea">
          <el-input v-model="quanshuForms.buildingArea" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px;">单位：平方米</span>
        </el-form-item>
        <el-form-item label="使用期限">
          <el-input v-model="quanshuForms.serviceLife" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px;color: #FF473E;">注：请填写使用期限</span>
        </el-form-item>
        <el-form-item label="权利其他状况">
          <el-input v-model="quanshuForms.otherRight" type="textarea" :rows="6" style="width: 360px;" />
        </el-form-item>
        <div class="section-title">附件信息</div>
        <el-form-item label="产权证">
          <el-upload v-model:file-list="fileList1" :action="adminUrl" :on-success="uploadSuccess1" :headers="headerOdj"
            list-type="picture-card">
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="handleRemove1(file)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="宗地图">
          <el-upload v-model:file-list="fileList2" :action="adminUrl" :on-success="uploadSuccess2" :headers="headerOdj"
            list-type="picture-card">
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="handleRemove2(file)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="分户图">
          <el-upload v-model:file-list="fileList3" :action="adminUrl" :on-success="uploadSuccess3" :headers="headerOdj"
            list-type="picture-card">
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="handleRemove3(file)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="二维码">
          <el-upload v-model:file-list="fileList4" :action="adminUrl" :on-success="uploadSuccess4" :headers="headerOdj"
            list-type="picture-card">
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="handleRemove4(file)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 物业信息列表 -->
    <el-drawer v-model="dialog4" :size="1000" :before-close="handleClose4" :show-close="false" class="loudong-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">物业信息</span>
          <div>
            <el-button @click="dialog4 = false">取消</el-button>
            <el-button type="primary" @click="addWuYe">新增</el-button>
          </div>
        </div>
      </template>
      <el-table :data="wuyeData" row-key="id">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="物业服务单位名称" prop="name"></el-table-column>
        <el-table-column align="left" label="物业类型" prop="managerType">
          <template #default="scope">
            <span>{{ scope.row.managerType == 1 ? '自管' : '第三方物业单位' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" min-width="100">
          <template #default="scope">
            <el-button type="primary" link icon="edit" @click="editWuYe(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" link icon="delete" @click="delWuYe(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <!-- 物业信息 -->
    <el-drawer v-model="wuyeVisible" :size="1000" :before-close="handleClose5" :show-close="false"
      class="loudong-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">物业信息</span>
          <div>
            <el-button @click="closeDialog5">取消</el-button>
            <el-button type="primary" @click="enterDialog5">确定</el-button>
          </div>
        </div>
      </template>
      <el-form v-if="wuyeVisible" ref="wuyeForm" label-width="150" :model="wuyeForms" :rules="wuyeRules">
        <div class="section-title">物业基本信息</div>
        <el-form-item label="物业管理类型" prop="managerType">
          <el-radio-group v-model="wuyeForms.managerType" class="ml-4">
            <el-radio :value="1" size="large">自管</el-radio>
            <el-radio :value="2" size="large">第三方物业单位</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="物业服务单位名称" prop="name">
          <el-input v-model="wuyeForms.name" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px;color: #FF473E;">注：请填写注册的物业服务单位的全称</span>
        </el-form-item>
        <el-form-item label="物业服务单位负责人" prop="superintendent">
          <el-input v-model="wuyeForms.superintendent" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px;color: #FF473E;">注：请填写物业服务单位的负责人或法人代表</span>
        </el-form-item>
        <el-form-item label="负责人联系电话" prop="contact">
          <el-input v-model="wuyeForms.contact" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px;color: #FF473E;">注：请填写负责人的联系电话</span>
        </el-form-item>
        <el-form-item label="服务时间" style="width: 480px" prop="time">
          <el-date-picker v-model="wuyeForms.time" type="daterange" range-separator="-" start-placeholder="开始时间"
            end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" popper-class="date-style" />
        </el-form-item>
        <el-form-item label="合同物业费" prop="property">
          <el-input v-model="wuyeForms.property" placeholder="请输入" style="width: 360px" />
          <span style="margin-left: 4px">元</span>
        </el-form-item>
        <el-form-item label="服务内容" prop="serveContent">
          <el-input v-model="wuyeForms.serveContent" type="textarea" :rows="6" style="width: 360px;" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="wuyeForms.notes" type="textarea" :rows="6" style="width: 360px;" />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import {
  getQuanShuList,
  createQuanShu,
  updateQuanShu,
  deleteQuanShu,
} from '@/api/shujuchuli'
import {
  unitBaseInfo,
  unitBuildingById,
  deteleBuildingProperty,
  addBuildingProperty,
  editBuildingProperty,
  buildingProperty,
  unitRoomExceed
} from '@/api/unit'
import {
  getDyList
} from '@/api/xitongpeizhi'
import { formatTimestamps } from '@/utils/format'
import { computed, ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
defineOptions({
  name: 'Dashboard'
})
const appStore = useAppStore()
const userStore = useUserStore()
const headerOdj = ref({ token: userStore.token })
const adminUrl = ref('')
adminUrl.value = import.meta.env.VITE_BASE_PATH + '/file/upload'
const activeTitle = ref(0)
function changeTitle(val) {
  activeTitle.value = val
}
const unitInfo = ref({})
const lbList = ref([])
const bglData = ref([])
const bglInfo = ref({
   ids:''
})
const quanshuRules = reactive({
  certificateNo: [{ required: true, message: '请输入产权证号', trigger: 'blur' }],
  obligee: [{ required: true, message: '请输入权利人', trigger: 'blur' }],
  commonSituation: [{ required: true, message: '请选择共有情况', trigger: 'change' }],
  buildingArea: [{ required: true, message: '请输入房屋建筑面积', trigger: 'blur' }]
})
const cbData = ref([])
const sjfxInfo = ref({
   bgs:{},
   fwyf:{},
   sbyf:{},
   jbbgyf:{}
})
onMounted(() => {
  unitBaseInfo().then(res => {
    unitInfo.value = res.result
    unitBuildingById(res.result.id).then(res => {
      bglData.value = res.result || []
      if (bglData.value.length > 0) {
        bglInfo.value = bglData.value[0]
        bglInfo.value.ids=bglData.value[0].id
      }
    })
    unitRoomExceed(res.result.id).then(res => {
      cbData.value = res.result
      sjfxInfo.value.bgs = cbData.value.find(item=>item.roomTypeInt==5)||{}
      sjfxInfo.value.fwyf = cbData.value.find(item=>item.roomTypeInt==1)||{}
      sjfxInfo.value.sbyf = cbData.value.find(item=>item.roomTypeInt==2)||{}
      sjfxInfo.value.jbbgyf = cbData.value.find(item=>item.roomTypeInt==0)||{}
    })
  })
  getDyList({ pageNumber: 1, pageSize: 100 }).then(res => {
    lbList.value = res.result.data.filter(item => item.type == 2)
  })
})
function getJb(val) {
  let res = ''
  let obj = lbList.value.find(item => item.id == val)
  if (obj) {
    res = obj.name
  }
  return res
}
const fileList1 = ref([])
const handleRemove1 = (file) => {
  fileList1.value = []
  quanshuForms.value.propertyCert = ''
}
const uploadSuccess1 = (res) => {
  if (res.code != 200) {
    ElMessage({
      type: 'error',
      message: '上传失败' + res.msg
    })
    fileList1.value.pop()
    return
  }
  quanshuForms.value.propertyCert = res.result
}
const fileList2 = ref([])
const handleRemove2 = (file) => {
  fileList2.value = []
  quanshuForms.value.map = ''
}
const uploadSuccess2 = (res) => {
  if (res.code != 200) {
    ElMessage({
      type: 'error',
      message: '上传失败' + res.msg
    })
    fileList2.value.pop()
    return
  }
  quanshuForms.value.map = res.result
}
const fileList3 = ref([])
const handleRemove3 = (file) => {
  fileList3.value = []
  quanshuForms.value.splitting = ''
}
const uploadSuccess3 = (res) => {
  if (res.code != 200) {
    ElMessage({
      type: 'error',
      message: '上传失败' + res.msg
    })
    fileList3.value.pop()
    return
  }
  quanshuForms.value.splitting = res.result
}
const fileList4 = ref([])
const handleRemove4 = (file) => {
  fileList4.value = []
  quanshuForms.value.erCode = ''
}
const uploadSuccess4 = (res) => {
  if (res.code != 200) {
    ElMessage({
      type: 'error',
      message: '上传失败' + res.msg
    })
    fileList4.value.pop()
    return
  }
  quanshuForms.value.erCode = res.result
}
const dialog2 = ref(false)
const isQuanShuEdit = ref(false)
const quanshuForms = ref({
  buildingArea: '',
  buildingId: '',
  certificateNo: '',
  commonSituation: '',
  erCode: '',
  landUseRightArea: '',
  map: '',
  obligee: '',
  otherRight: '',
  propertyCert: '',
  purpose: '',
  realEstateUnitNo: '',
  rightNature: '',
  rightType: '',
  serviceLife: '',
  splitting: ''
})
const quanshuTitle = ref('新增权属信息')
const handleClose2 = (done) => {
  dialog2.value = false
}

const quanshuData = ref([])
const getQuanShuData = async () => {
  const res = await getQuanShuList(bglInfo.value.buildingId)
  if (res.code == 200) {
    quanshuData.value = res.result
  }
}
const openQuanShu = (id) => {
  dialog2.value = true
  getQuanShuData()
}
const addQuanShu = () => {
  quanshuTitle.value = '新增权属信息'
  isQuanShuEdit.value = false
  dialog3.value = true
}
const editQuanShu = async (row) => {
  isQuanShuEdit.value = true
  quanshuTitle.value = '修改权属信息'
  quanshuForms.value = JSON.parse(JSON.stringify(row))
  quanshuForms.value.ownershipId = quanshuForms.value.id
  if (quanshuForms.value.propertyCert) {
    fileList1.value = [{
      name: '1',
      url: quanshuForms.value.propertyCert
    }]
  }
  if (quanshuForms.value.map) {
    fileList2.value = [{
      name: '1',
      url: quanshuForms.value.map
    }]
  }
  if (quanshuForms.value.splitting) {
    fileList3.value = [{
      name: '1',
      url: quanshuForms.value.splitting
    }]
  }
  if (quanshuForms.value.erCode) {
    fileList4.value = [{
      name: '1',
      url: quanshuForms.value.erCode
    }]
  }
  dialog3.value = true
}
const delQuanShu = (row) => {
  ElMessageBox.confirm(
    '确认删除?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    const res = await deleteQuanShu(row.id)
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      getQuanShuData()
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}
const dialog3 = ref(false)
const quanshuForm = ref(null)
const initQuanShuForm = () => {
  quanshuForm.value.resetFields()
  quanshuForms.value = {
    buildingArea: '',
    buildingId: '',
    certificateNo: '',
    commonSituation: '',
    erCode: '',
    landUseRightArea: '',
    map: '',
    obligee: '',
    otherRight: '',
    propertyCert: '',
    purpose: '',
    realEstateUnitNo: '',
    rightNature: '',
    rightType: '',
    serviceLife: '',
    splitting: ''
  }
  quanshuForms.value.buildingId = bglInfo.value.buildingId
  fileList1.value = []
  fileList2.value = []
  fileList3.value = []
  fileList4.value = []
}
const handleClose3 = (done) => {
  dialog3.value = false
}
const closeDialog3 = () => {
  initQuanShuForm()
  dialog3.value = false
}
const enterDialog3 = async () => {
  quanshuForm.value.validate(async (valid) => {
    if (valid) {
      console.log(quanshuForms.value, 'form.value');
      quanshuForms.value.buildingId = bglInfo.value.buildingId
      let res
      if (isQuanShuEdit.value) {
        res = await updateQuanShu(quanshuForms.value)
      } else {
        res = await createQuanShu(quanshuForms.value)
      }
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: isQuanShuEdit.value ? '编辑成功' : '添加成功!'
        })
        getQuanShuData()
      }
      initQuanShuForm()
      dialog3.value = false
    }
  })
}
const dialog4 = ref(false)
function handleClose4() {
  dialog4.value = false
}
const wuyeData = ref([])
const getWuYeData = () => {
  buildingProperty(bglInfo.value.buildingId).then(res => {
    wuyeData.value = res.result
  })
}
function openWuYe() {
  getWuYeData()
  dialog4.value = true
}
const wuyeVisible = ref(false)
const wuyeForm = ref(null)
const wuyeForms = ref({
  name: '',
  time: [],
  contact: '',
  managerType: 1,
  notes: '',
  property: '',
  serveContent: '',
  serveEnd: '',
  serveStart: '',
  superintendent: '',
  buildingId: ''
})
const isWyEdit = ref(false)
const wuyeTitle = ref('新增物业信息')
function addWuYe() {
  wuyeVisible.value = true
}
function editWuYe(row) {
  console.log(row, 'roew')
  wuyeForms.value = JSON.parse(JSON.stringify(row))
  wuyeForms.value.propertyId = wuyeForms.value.id
  wuyeForms.value.time = [wuyeForms.value.serveStart, wuyeForms.value.serveEnd]
  isWyEdit.value = true
  wuyeTitle.value = '修改物业信息'
  wuyeVisible.value = true
}
const delWuYe = (row) => {
  ElMessageBox.confirm(
    '确认删除?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    const res = await deteleBuildingProperty(row.id)
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      getWuYeData()
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}
function handleClose5() {
  wuyeVisible.value = false
}
function closeDialog5() {
  wuyeVisible.value = false
}
const enterDialog5 = async () => {
  wuyeForm.value.validate(async (valid) => {
    if (valid) {
      wuyeForms.value.serveStart = wuyeForms.value.time[0]
      wuyeForms.value.serveEnd = wuyeForms.value.time[1]
      wuyeForms.value.buildingId = bglInfo.value.buildingId
      let res
      if (isWyEdit.value) {
        res = await editBuildingProperty(wuyeForms.value)
      } else {
        res = await addBuildingProperty(wuyeForms.value)
      }
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: isWyEdit.value ? '编辑成功' : '添加成功!'
        })
        getWuYeData()
      }
      wuyeVisible.value = false
    }
  })
}
function changeBuild(val){
  bglInfo.value = bglData.value.find(item=>item.id ==val)
  bglInfo.value.ids = val
}
</script>

<style lang="scss" scoped>
.main {
  margin-bottom: 50px;
}

.header {
  display: flex;
  height: 377px;

  .swiper {
    flex: 1;
    margin-right: 20px;

    .el-carousel__item {
      position: relative;
    }

    .mask {
      position: absolute;
      display: flex;
      padding-left: 100px;
      align-items: center;
      bottom: 0;
      width: 100%;
      height: 30px;
      background-color: rgb(0 0 0 / 42%);
      border-radius: 0 0 4px 4px;

      .des {
        color: #fff;
      }
    }

    .img {
      height: 100%;
      width: 100%;
    }
  }

  .right {
    flex: 1;
    background: url("http://warehouse-api.lanbeiduo.com/api/file/download/3rUNlUntSd_bg_news.png") no-repeat;
    background-size: cover;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    padding: 20px;

    .top {
      display: flex;
      justify-content: space-between;

      .tabs {
        display: flex;

        .tab-title {
          width: 88px;
          height: 40px;
          margin: 5px 10px;

          .tab-item {
            line-height: 34px;
            width: 88px;
            height: 40px;
            text-align: center;
            cursor: pointer;
            color: #0b6bdb;
            background: url('http://warehouse-api.lanbeiduo.com/api/file/download/2HYZ999Peg_btn.png') no-repeat;
          }

          .current {
            color: #ffffff;
            background: url('http://warehouse-api.lanbeiduo.com/api/file/download/0gElGw1aWa_btn_h.png') no-repeat;
          }
        }
      }

      .more {
        line-height: 32px;
        color: #2d69ff;
        padding-right: 5px;
        font-weight: 600;
      }
    }

    .card-list {
      .item {
        display: flex;
        align-items: center;
        font-size: 16px;
        height: 40px;
        cursor: pointer;
        border-bottom: 1px dashed rgb(0 0 0 / 12%);
        margin: 0 10px;

        .dot {
          width: 8px;
          height: 8px;
          background-color: #2d69ff;
          transition: all .2s ease-in-out;
        }

        .text {
          color: #000000;
          width: 80%;
          margin-left: 10px;
          font-size: 14px;
          word-break: break-word;
          text-overflow: ellipsis;
          overflow: hidden;
          transition: all .2s ease-in-out;
        }

        .date {
          margin-left: auto;
          padding-right: 5px;
          color: rgb(0 0 0 / 40%);
        }
      }

      .item:hover .dot {
        height: 40px;
      }

      .item:hover .text {
        color: #2d69ff;
      }
    }
  }
}

.row {
  display: flex;
  margin-top: 20px;

  .unit {
    flex: 2;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgb(0 0 0 / 10%);
    padding: 20px;
    margin-right: 20px;

    .card-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      line-height: 18px;
      font-weight: bold;
      position: relative;
      padding-bottom: 15px;
      border-bottom: 1px dashed #939497;

      span {
        margin-right: 6px;
      }

      .img {}
    }

    .agency-name {
      display: flex;
      font-weight: bold;
      font-size: 18px;
      color: #333;
      margin: 20px 0;

      .icon {
        width: 22px;
        height: 22px;
        margin-right: 10px;
      }
    }

    .info-bar {
      display: flex;
      border-bottom: 1px solid #e2e4e8;
      padding-bottom: 20px;
      padding-top: 5px;

      .info-item {
        width: 180px;
        box-sizing: border-box;
        float: left;
        text-align: center;
        display: flex;
        justify-content: center;

        .label {
          font-size: 15px;
          line-height: 20px;
          color: #888;
        }

        .info {
          font-size: 15px;
          line-height: 20px;
          color: #000000;
        }

        .pic {}
      }
    }

    .chart {
      padding-top: 25px;

      .info-area {
        display: flex;

        .info-item {
          text-align: center;
          width: 50%;

          .icon {}

          .label {
            font-size: 15px;
            color: #999;
            line-height: 25px;
            padding: 10px;
          }

          .info {
            font-size: 28px;
            color: #333333;
          }

          .pic {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }

  .building {
    flex: 5;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgb(0 0 0 / 10%);
    padding: 20px;

    .building-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .building-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        line-height: 18px;
        font-weight: bold;
        position: relative;

        span {
          margin-right: 6px;
        }
      }
    }

    .building-content {
      display: flex;

      .buliding-pic {
        width: 290px;
        height: 203px;
      }

      .icon-list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .icon-item {
          display: flex;
          width: 48%;
          padding: 13px 0 0 30px;
          background: #f4f4f4;
          height: 95px;
          margin-left: 2%;

          .icon {
            width: 22px;
            height: 22px;
            margin-right: 20px;
          }

          .label {
            font-size: 15px;
            color: #666666;
            margin-bottom: 10px;
          }

          .value {
            .num {
              font-size: 24px;
              color: #333333;
              font-weight: bold;
            }

            .dw {
              font-size: 15px;
              color: #999999;
              margin-left: 20px;
            }
          }
        }
      }
    }

    .building-bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding: 0 80px;

      .item {
        display: flex;
        align-items: center;
        width: 22%;
        border-right: 1px solid #e2e4e8;
        margin-right: 4%;
        cursor: pointer;

        .icon {
          margin-right: 10px;
        }
      }

      .item:hover {
        color: #2d69ff;
      }
    }
  }

  .picture {
    width: 100%;
    height: 164px;
  }
}

.section {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 8px rgb(0 0 0 / 10%);
  padding: 19px;
  box-sizing: border-box;
  margin-top: 20px;

  .top {
    display: flex;
    justify-content: space-between;

    .right {
      display: flex;

      .item {
        display: flex;
        margin-left: 20px;

        .label {
          font-size: 15px;
          color: #888888;
        }

        .value {
          color: #eb9448;
          font-weight: bold;
        }
      }
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    position: relative;
    padding-bottom: 15px;

    span {
      margin-right: 6px;
    }

    .img {}
  }

  .content {
    display: flex;
    justify-content: space-between;

    .yf-type {
      width: 24%;

      .info {
        border-radius: 10px;
        padding: 0 0 16px 26px;

        .name {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #333;
          padding: 15px 0;
          position: relative;
          border-bottom: 1px dashed #e2e4e8;
        }

        .label {
          font-size: 14px;
          line-height: 16px;
          color: #888;
          margin-top: 15px;
          margin-bottom: 8px;
          text-align: left;
        }

        .value {
          font-size: 14px;
          color: #999;
          display: inline-block;
          margin-left: 6px;

          .num {
            font-size: 26px;
            font-weight: bold;
          }
        }
      }

      .bottom {
        display: flex;
        padding: 8px 0 8px 30px;
        background: #f4f4f4;
        margin-top: 16px;
        font-weight: bold;

        .icon {
          margin-right: 10px;
        }
      }

      .red {
        color: #e81e1e;
      }

      .green {
        color: #26b44f;
      }
    }
  }

  .link-list {
    display: flex;
    justify-content: space-between;

    .link-item {
      width: 24%;
      height: 236px;
      overflow: hidden;
      cursor: pointer;

      .img {
        width: 100%;
        height: 146px;
      }

      .service-word {
        height: 90px;
      }

      .title {
        font-size: 17px;
        color: #666666;
        font-weight: bold;
        padding-top: 20px;
      }

      .english {
        font-size: 12px;
        color: #999999;
        margin-top: 5px;
      }

      .service-word2 {
        height: 90px;
        text-align: center;
        color: #ffffff;
        background: #0e73f9;

        .label {
          font-size: 17px;
          color: #ffffff;
          font-weight: bold;
          padding-top: 20px;
        }

        .info {
          font-size: 12px;
          color: #ffffff;
          margin-top: 5px;
        }
      }
    }

    .link-item:hover .service-word2 {
      transition: all .2s ease-in-out;
      transform: translateY(-90px);
    }
  }
}

:deep .el-carousel__indicators {
  left: unset;
  transform: unset;
  right: 2%;
  bottom: -6px;
}

:deep .el-carousel__button {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

:deep .is-active .el-carousel__button {
  background: #fff;
}

.section-title {
  font-weight: bold;
  font-size: 20px;
  line-height: 33px;
  padding: 8px 0 4px 14px;
  color: #4E7DFD;
  border-bottom: 1px solid #E7ECF1;
  position: relative;
  margin-bottom: 20px;
}

.section-title:before {
  content: '';
  position: absolute;
  top: 17px;
  left: 0;
  width: 6px;
  height: 14px;
  border-radius: 3px;
  background: #4E7DFD;
}
</style>
